<script setup>
import { reactive } from "vue";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

import quikLogin from "./components/quikLogin.vue";
import passwordLogin from "./components/passwordLogin.vue";
import firstLogin from "./components/firstLogin.vue";
import registCompany from "./components/registCompany.vue";
// 国际化
import { useI18n } from "vue-i18n";
import axios from "axios";
const I18n = useI18n();
const { locale } = useI18n();
// let language = ref("ch"); // 当前语言

const jumpTo = (path) => {
  router.push(path);
};

// 修改语言
const changeLang = (val) => {
  if (val === "zh") {
    locale.value = "zh-cn";
  } else {
    locale.value = "en-us";
  }
};

// 登录表单
const form = reactive({
  username: "",
  password: "",
  agree: false,
});

// 登录函数
const onLogin = async () => {
  const res = await axios.post("${apiUrl}/login", { ...form.value });
};

// 登录类型
const loginType = ref("quik");

// 修改登录类型
const changeLoginType = (type) => {
  loginType.value = type;
};

// 验证码倒计时
let time = ref(0);
let timeInter = null;

// 获取验证码
const getCode = () => {
  if (time.value === 0) {
    time.value = 120;
    if (timeInter === null) {
      timeInter = setInterval(() => {
        if (time.value > 0) {
          time.value = time.value - 1;
        } else {
          clearInterval(timeInter);
        }
      }, 1000);
    }
  }
};

onMounted(() => {
  const token = getToken();
  if (!!token) {
    jumpTo("/");
  }
});
</script>

<template>
  <div class="loginTop">
    <div class="middle">
      <div class="top">
        <div class="logoBox">
          <img src="../../assets/img/whiteLogo.png" />
        </div>

        <div class="langeuageBox">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="languageFill"
            viewBox="0 0 32 32"
            width="26"
            height="26"
          >
            <defs></defs>
            <g>
              <path
                d="M18.4 2.2c-0.6 0-1.4-0.2-2.2-0.2h-0.4c-0.8 0-1.4 0-2.2 0.2-6.6 1.2-11.6 7-11.6 13.8s5 12.6 11.6 13.8c0.6 0 1.4 0.2 2.2 0.2h0.4c0.8 0 1.4 0 2.2-0.2 6.6-1.2 11.6-7 11.6-13.8s-5-12.6-11.6-13.8zM26.4 10h-5.4c-0.6-2.2-1.6-4-3-5.8 3.6 0.6 6.6 2.8 8.4 5.8zM16 4.8c1.2 1.4 2.2 3.2 3 5.2h-6c0.8-2 1.8-3.8 3-5.2zM20 16c0 1.4-0.2 2.8-0.4 4h-7.2c-0.2-1.2-0.4-2.6-0.4-4s0.2-2.8 0.4-4h7c0.4 1.2 0.6 2.6 0.6 4zM13.8 4.2c-1.2 1.8-2.2 3.6-2.8 5.8h-5.4c1.8-3 4.8-5.2 8.2-5.8zM4.8 12h5.8c-0.4 1.2-0.6 2.6-0.6 4s0.2 2.8 0.4 4h-5.6c-0.6-1.2-0.8-2.6-0.8-4s0.2-2.8 0.8-4zM5.6 22h5.4c0.6 2.2 1.6 4 3 5.8-3.6-0.6-6.6-2.8-8.4-5.8zM16 27.2c-1.2-1.4-2.2-3.2-3-5.2h6c-0.8 2-1.8 3.8-3 5.2zM18.2 27.8c1.2-1.8 2.2-3.6 3-5.8h5.4c-2 3-5 5.2-8.4 5.8zM27.2 20h-5.8c0.4-1.2 0.6-2.6 0.6-4s-0.2-2.8-0.4-4h5.8c0.4 1.2 0.6 2.6 0.6 4s-0.2 2.8-0.8 4z"
              ></path>
            </g>
          </svg>
          <!-- <el-select
            v-model="language"
            placeholder="Select"
            size="large"
            style="width: 100px">
            <el-option label="中文" value="ch" />
            <el-option label="EN" value="en" />
          </el-select> -->
          <div class="btn cur" @click="changeLang($t('navigation.changeLang'))">
            {{ $t("navigation.changeLang") }}
          </div>
        </div>
      </div>
      <div class="loginBox">
        <quikLogin
          v-if="loginType === 'quik'"
          @changeLoginType="changeLoginType"
        ></quikLogin>
        <passwordLogin
          v-if="loginType === 'password'"
          @changeLoginType="changeLoginType"
        ></passwordLogin>
        <firstLogin
          v-if="loginType === 'first'"
          @changeLoginType="changeLoginType"
        ></firstLogin>
        <registCompany
          v-if="loginType === 'regist'"
          @changeLoginType="changeLoginType"
        ></registCompany>
      </div>
    </div>
  </div>

  <div class="footer">
    <div class="top">
      <div class="item">{{ $t("loginRegist.phone") }}</div>
      <div class="item">{{ $t("loginRegist.address") }}</div>
    </div>
    <div class="bottom">{{ $t("loginRegist.copyRight") }}</div>
  </div>
</template>

<style scoped lang="scss">
.loginTop {
  width: 100%;
  height: calc(100vh - 120px);
  background: url("../../assets/img/v2_smi9lj.jpg") no-repeat;
  background-size: 100% auto;
  background-position: center center;
  position: relative;

  .middle {
    .top {
      display: flex;
      box-sizing: border-box;
      justify-content: space-between;
      padding-top: 40px;

      .logoBox {
        width: 200px;

        img {
          width: 100%;
        }
      }
    }

    .loginBox {
      display: flex;
      justify-content: end;

      .boxBg {
        width: 400px;
        background-color: #fff;
        padding: 30px 40px;
        border: 1px solid #ccc;
        position: absolute;
        bottom: 200px;

        .title {
          font-size: 20px;
          margin-bottom: 40px;
          // font-weight: bold;
          letter-spacing: 2px;
          text-align: center;
        }

        .loginInput {
          height: 50px;
          border-radius: 0;
          margin-bottom: 5px;
        }

        .code {
          cursor: pointer;
          width: 70px;
          text-align: center;
        }

        .formItem {
          // display: flex;
          font-size: 12px;

          .info {
            line-height: 24px;

            .agreement {
              color: #156197;
            }
          }

          .loginBtn {
            width: 100%;
            height: 40px;
            margin-top: 30px;
          }

          .changeTypeBtn {
            text-align: center;
            font-size: 14px;
            margin-top: 10px;
            cursor: pointer;
          }
        }
      }
    }
  }
}

::v-deep .el-select__wrapper {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: none;
}

::v-deep .el-select__wrapper:hover {
  box-shadow: none;
}

::v-deep .el-select__selected-item {
  color: #fff;
}

.languageFill:not([stroke]) {
  fill: rgb(255, 255, 255);
  position: relative;
  top: 7px;
}

::v-deep .el-input-group__prepend {
  background-color: #fff;
}

::v-deep .el-input-group__append {
  background-color: #fff;
}

.footer {
  color: #999;
  text-align: center;

  .top {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 10px;

    .item {
      &:first-child {
        margin-right: 50px;
      }
    }
  }
}

.langeuageBox {
  color: #fff;
  display: flex;
  font-size: 25px;

  .btn {
    margin-left: 10px;
    position: relative;
    top: 2px;
    font-size: 20px;
    line-height: 31px;
  }
}
</style>
